<!--
  ~ Copyright 2017 Red Hat, Inc. and/or its affiliates.
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div id="diagramButtonsPanel" style="margin-left: 150px; margin-bottom: 10px; float: left;">
    <input id="shapeTesterButton" type="button" value="Shapes"
           title="Shapes" style="float: left;" onclick="navigateTo('shape-tester');"/>
</div>
<div id="diagramTesterPanel" style="display: none; float:left; border: 1px solid black; margin: 50px;" ></div>
<div style="clear: both"></div>
<div id="shapeTesterPanel" style="display: inline; float:left; margin: 50px; ">
    <table width="80%" border="1">
        <tr style="background-color: lightgrey; font-weight: bold; font-size:large; color: black;">
            <td style="padding: 10px;">
                Stencil: &nbsp;
                <select title="Shape" id="shapeSelector" onchange="updateContent()">
                </select>
            </td>
            <td style="padding: 10px;">
                Shape state: &nbsp;
                <select title="Shape state" id="shapeStateSelector" onchange="updateContent()">
                    <!--<option value="shape-icon" selected>Icon</option>-->
                    <option value="shape-state-none" selected>None</option>
                    <option value="shape-state-selected">Selected</option>
                    <!--<option value="shape-state-highlight">Highlight</option>-->
                    <!--<option value="shape-state-invalid">Invalid</option>-->
                </select>
            </td>
            <td style="padding: 10px;">
                Append text: &nbsp;
                <input type="checkbox" id="appendTextInput" title="Append text" onchange="updateContent()">
            </td>
            <td style="padding: 10px;">
                <input type="button" id="refreshInput" title="Refresh" value="Refresh" onclick="updateContent()">
            </td>
        </tr>
        <tr>
            <td colspan="5" align="center">
                <h4 style="margin: 5px;">Shape</h4>
                <div id="shapePanel" style="margin: 25px;"></div>
            </td>
        </tr>
        <tr>
            <td colspan="5" align="center">
                <h4 style="margin: 5px;">Icon</h4>
                <p id="iconHeaderSize" style="margin: 5px;font-size: small;"></p>
                <div id="iconPanel" style="margin: 25px;"></div>
            </td>
        </tr>
    </table>
</div>
</body>
</html>